<!--suppress ALL -->
<include file="./Template/header.html" />

<style>
	.tips{
		font-size: 0.71rem;
		color: #d92f3b;
		text-align: center;
		margin-bottom: 8.57rem;
		padding: 0rem 1rem 1rem 1rem;
	}
</style>

<link rel="stylesheet" type="text/css" href="/Template/css/booking.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "预约";

		var app = new Vue({
			el: '#container',
			data: {
				webArr: [],
				dayList: [],
				shopList: [],
				shopInfo:[],
				bookingType: 1,
			},
			methods: {
				booking: function() {

					var name = $("input[name=name]").val();
					var sex = $("select[name=sex]").val();
					var age = $("input[name=age]").val();
					var mobile = $("input[name=mobile]").val();
					var idcardNumber = $("input[name=idcardNumber]").val();

					var bookingType = $("input[name=bookingType]").val();

					var shopId = $("select[name=shopId]").val();
					var day = $("input[name=day]").val();

					var ruleId = $("select[name=ruleId]").val();
					var address = $("input[name=address]").val();
					var doctorName = $("input[name=doctorName]").val();
					var hospitalName = $("input[name=hospitalName]").val();

                    var needDoctor = "{$category.need_doctor}";

					if(isNullOrEmpty(name)) {
						alert("请填写姓名");
						return false;
					}

					if(isNullOrEmpty(sex)) {
						alert("请选择性别");
						return false;
					}

					if(isNullOrEmpty(age)) {
						alert("请填写年龄");
						return false;
					}

					if(isNullOrEmpty(mobile)) {
						alert("请填写联系方式");
						return false;
					}

					if(!checkPhone(mobile)) {
						alert("手机号位数不对");
						return false;
					}

					if(isNullOrEmpty(idcardNumber)) {
						alert("请填写身份证号");
						return false;
					}

					if(idcardNumber.length != 18) {
						alert("身份证号位数不对");
						return false;
					}

                    if(needDoctor == 1) {
                        if (isNullOrEmpty(doctorName)) {
                            alert("请填写医生姓名");
                            return false;
                        }

                        if (isNullOrEmpty(hospitalName)) {
                            alert("请填写医院名称");
                            return false;
                        }
                    }

					if(isNullOrEmpty(day)) {
						alert("请选择日期");
						return false;
					}

					if(bookingType == 1) {

						if(isNullOrEmpty(shopId)) {
							alert("请选择检测地点");
							return false;
						}

					} else {

						if(isNullOrEmpty(ruleId)) {
							alert("请选择所在地区");
							return false;
						}

						if(isNullOrEmpty(address)) {
							alert("请填写详细地址");
							return false;
						}

					}

					$.ajax({
						url:"/wechat/booking/booking",
						type:"post",
						data:{
							productId: "{$product.product_id}",
							name: name,
							sex: sex,
							mobile: mobile,
							age: age,
							idcardNumber: idcardNumber,
							bookingType: bookingType,
							shopId: shopId,
							ruleId: ruleId,
							day: day,
							address: address,
							doctorName: doctorName,
							hospitalName: hospitalName
						},
						dataType:"JSON",
						beforeSend:function(){
							$("#loadingToast").show();
						},
						complete:function(){
							$('#loadingToast').hide();
						},
						success:function(data){
							if(data.code == 999) {
								alert(data.msg);
								window.location.href = "/wechat/userCenter/myBooking";
							} else if(data.code == 200) {
								app.webArr = data.webarr;
								callpay();
							} else {
								alert(data.msg);
								return false;
							}

						},
					})



				}
			}
		})

		$("select[name=sex]").change(function() {
			var value = $(this).val();
			$(this).prev().val(value);
		});

		function getCityList() {

			$.ajax({
				url:"/wechat/booking/shopList",
				type:"post",
				data:{
					productId: "{$product.product_id}"
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.shopList = data.list;
					app.shopInfo = data.list[0];
					app.dayList = data.day_list;
					setTimeout(function() {

						$(".test-select select").each(function() {
							var value = $(this).find("option:selected").text();
							$(this).prev().val(value);
						});

						$(".calendar button").bind("click", function() {
							if($(this).hasClass("gray")) {
								return false;
							}

							$(".calendar button").each(function() {
								$(this).removeClass("blue");
							});

							$(this).addClass("blue");
							$("input[name=day]").val($(this).text());
						});

						$("select[name=ruleId]").change(function() {
							var value = $(this).find("option:selected").text();
							$(this).prev().val(value);
						});

						$("select[name=shopId]").change(function() {
							var value = $(this).find("option:selected").text();
							var index = $(this).find("option:selected").index();
                            app.shopInfo = data.list[index];
							$(this).prev().val(value);
						});

						$(".calendar").css("margin-bottom", "8.57rem");

					}, 200);

				},
			})

		}

		$("select[name=ruleId]").change(function() {

			var days = $(this).find("option:selected").attr("days");

			$("button.date").each(function(index) {
				if($(this).hasClass("system")) {
					$(this).removeClass("gray");
					$(this).removeClass("system");
				}
			});

			$("button.date").each(function(index) {
				if(index+1<=days) {
					$(this).addClass("gray");
					$(this).addClass("system");
				}
			});

		});

		$("button.go-home-btn").click(function() {

			if($(this).hasClass("active")) {
				return false;
			}

			$("button.date").removeClass("blue");

			$("button.my-place-btn").removeClass("active");
			$(this).addClass("active");

			$("input[name=bookingType]").val(2);

			$(".my-place").hide();
			$(".go-home").show();

			var days = $("select[name=ruleId]").find("option:selected").attr("days");

			$("button.date").each(function(index) {
				if($(this).hasClass("system")) {
					$(this).removeClass("gray");
					$(this).removeClass("system");
				}
			});

			$("button.date").each(function(index) {
				if(index+1<=days) {
					$(this).addClass("gray");
					$(this).addClass("system");
				}
			});

			$(".tips").show();
			$(".calendar").css("margin-bottom", "0");

		});

		$("select[name=ruleId]").change(function() {
			var days = $("select[name=ruleId]").find("option:selected").attr("days");

			$("button.date").each(function(index) {
				if(index+1<=days) {
					$(this).addClass("gray");
				}
			});
		});

		$("button.my-place-btn").click(function() {
			if($(this).hasClass("active")) {
				return false;
			}

			$("button.date").each(function(index) {
				if($(this).hasClass("system")) {
					$(this).removeClass("gray");
					$(this).removeClass("system");
				}
			});

			$("button.go-home-btn").removeClass("active");
			$(this).addClass("active");

			$("input[name=bookingType]").val(1);

			$(".my-place").show();
			$(".go-home").hide();
			$(".tips").hide();
			$(".calendar").css("margin-bottom", "8.57rem");

			$("button.date").removeClass("blue");

		});

		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '{$appId}', // 必填，公众号的唯一标识
			timestamp: '{$config.timestamp}', // 必填，生成签名的时间戳
			nonceStr: '{$config.noncestr}', // 必填，生成签名的随机串
			signature: '{$config.signature}', // 必填，签名，见附录1
			jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function(){});

		function callpay(){
			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					alert("必须在微信中支付");
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				}else if (document.attachEvent){
					alert("必须在微信中支付2");
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				}
			}else{
				onBridgeReady();
			}
		}

		function onBridgeReady(){
			wx.chooseWXPay({
				timestamp: app.webArr.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				nonceStr: app.webArr.nonceStr, // 支付签名随机串，不长于 32 位
				package: app.webArr.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
				signType: app.webArr.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				paySign: app.webArr.paySign, // 支付签名
				success: function (res) {
					// 支付成功后的回调函数
					alert('恭喜您支付成功')
					window.location.href = "/wechat/userCenter/myBooking";
				}
			});
		}

		getCityList();

	});


</script>

<div class="container" id="container">
	<div class="hint-info">
		根据药监局追溯要求,为了您的合法权益,请务必填写真实信息。
	</div>
	<div class="edit-content">
		<div class="item">
			<span>患者姓名</span>
			<input type="text" name="name" placeholder="请填写患者的真实姓名">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>患者性别</span>
			<input id="gender" type="text" readonly placeholder="请选择患者的性别">
			<select name="sex">
				<option value="0">请选择患者性别</option>
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<img class="icon-right gender" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>患者年龄</span>
			<input type="text" name="age" placeholder="请填写患者年龄">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>联系人电话</span>
			<input type="text" name="mobile" placeholder="请填写的电话号码">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>患者身份证号</span>
			<input type="text" name="idcardNumber" placeholder="请填写您的身份证号">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>医生</span>
			<input type="text" name="doctorName" value="{$info.doctor_name}" placeholder="请填写您的医生姓名">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>医院</span>
			<input type="text" name="hospitalName" value="{$info.hospital_name}" placeholder="请填写您的医院名称">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
	</div>
	<div class="test-select">
		<div class="method-select">
			<p class="title">取型评估</p>
			<button class="my-place-btn active">我方检测点</button>
			<button class="go-home-btn">上门服务</button>
			<input type="hidden" name="bookingType" value="{{bookingType}}"/>
		</div>
		<div class="my-place">
			<div class="place-select">
				<span class="site-select">请选择检测地点</span>
				<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
				<input class="place" type="text" placeholder="请选择检测地点" readonly>
				<select name="shopId" id="place">
					<option value="{{shop.shop_id}}" v-for="shop in shopList">{{shop.shop_name}}</option>
				</select>
				<p class="address">{{shopInfo.address}}
					<br>电话：{{shopInfo.contact}}</p>
			</div>
		</div>
		<div class="go-home" style="display: none;">
			<div class="place-select">
				<span>请选择所在地区</span>
				<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
				<input class="home" type="text" placeholder="请选择所在地区" readonly>
				<select name="ruleId" id="home">
					{:getRuleSelectOptionHtml(0,0)}
				</select>
			</div>
			<div class="detail-address">
				<span>请填写详细地址</span>
				<input type="text" name="address" placeholder="请填写详细地址">
			</div>
		</div>
	</div>
	<div class="calendar" v-if="dayList.length > 0">
		<input type="hidden" name="day" />
		<button v-bind:class="item.status==-1 ? 'date gray' : 'date'" v-for="item in dayList">{{item.day}}</button>
	</div>
	<div class="tips" style="display: none;">
		<p>取消或退费需联系客服，010-68639009，京五环内需提前两天之前，京五环外津冀需提前三天之前，京津冀外需提前四天之前，只退费用80%</p>
	</div>
	<div class="operation">
		<button class="cancel">取消</button>
		<button class="confirm" v-on:click="booking">确认</button>
	</div>
</div>
<include file="./Template/footer.html" />

